<template>
  <div>
    <div class="hot-recommend">周末去哪儿</div>
    <ul>
      <li class="view-recommend border-bottom" v-for="item in list" :key="item.id">
        <div class="img-wraper">
          <img class="view-img" :src="item.imgUrl" />
        </div>
        <div class="content-wraper">
          <p class="content-title">{{item.title}}</p>
          <p class="content-desc">{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  },
  data () {
    return {
      imgList: [
        {
          id: '001',
          imgUrl: 'https://imgs.qunarzz.com/vc/67/f1/0c/5e45d895a08df85d2bf7af3d31.jpg_90.jpg',
          title: '大连发现王国大连发现王国大连发现王国大连发现王国大连发现王国',
          desc: '这里从满无穷的乐趣这里从满无穷的乐趣这里从满无穷的乐趣',
          detail: '查看详情'
        },
        {
          id: '002',
          imgUrl: 'https://imgs.qunarzz.com/vc/c8/26/54/c1d8c4c9fd791daf73c37a2fc5.jpg_90.jpg',
          title: '金石滩',
          desc: '中国的黄金海岸',
          detail: '查看详情'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/minix.styl'
  .hot-recommend
    line-height: 0.8rem
    text-indent: 0.1rem
    margin-top: 0.1rem
    background: #ccc
  .view-recommend
    overflow: hidden
    .img-wraper
      overflow: hidden
      height: 0
      padding-bottom: 33.44%
      .view-img
        width: 100%
    .content-wraper
      padding: 0.1rem
      .content-title
        line-height: 0.54rem
        font-size: 0.32rem
        ellipsis()
      .content-desc
        line-height: 0.4rem
        color: #ccc
        ellipsis()
</style>
